<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="description" content="${columns.description}">
    <meta name="keywords" content="${columns.keywords!'ofcms'}">
    <link rel="stylesheet" href="${reroot}/static/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${reroot}/static/assets/css/index.css" media="all">
    <link rel="stylesheet" href="${reroot}/static/assets/css/reset.css" media="all">
    <link rel="stylesheet" href="${reroot}/static/assets/css/product.css" media="all">
    <script src="${reroot}/static/plugins/layui/layui.js"></script>
    <style type="text/css">
        .left-box-btn{
            display:inline-block;background-image:url('${reroot}/static/assets/image/btn-left.png');width: 12%;height:100%;background-position:center;background-size: contain;background-repeat: no-repeat
        }
        .right-box-btn{
            display:inline-block;background-image:url('${reroot}/static/assets/image/btn-right.png');width: 12%;height:100%;background-position:center;background-size: contain;background-repeat: no-repeat
        }
        .index-1 {
            width: 100%;
            height: calc(80vw);
            background-image: url('${reroot}/static/assets/image/index-bg.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;

            text-align: center;
        }

        .footer {
            width: 100%;
            height: calc(26.35vw);
            background-image: url('${reroot}/static/assets/image/index-bottom.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="header">
        <img src="${reroot}/static/assets/image/logo.png" class="logo"/>
        <div class="linkgroup">
            <@of.column site_id=site.site_id >
            <span class="link  <#if data.column_english == columns.column_english> selected</#if>">
                <a href="${session.site.access_protocol}://${session.site.access_path}">首页</a>
            </span>
            <#list column as data >

            <@of.column site_id=site.site_id parent_id=data.column_id >
            <a class="link <#if data.column_english == columns.column_english> selected</#if>" href="${data.column_english}.html">
                ${data.column_name}
            </a>
        </@of.column>

    </#list>

</@of.column>
</div>
<img class="search" src="${reroot}/static/assets/image/search.png">
<img src="${reroot}/static/assets/image/bgright.png" style="position: absolute;right:0;top:0;z-index: -999;">
</div>
</div>

<div class="of-banner">
    <div class="layui-carousel" id="test">
        <div carousel-item="">
            <img src="${reroot}/static/assets/image/product.jpg"  >
        </div>
    </div>
</div>
    <div class="of-content">
        <div class="of-crad" style="height: 300px;width: 900px;margin: 0 auto;">
            <div class="content-txt">${columns.column_content}</div>
        </div>
        <div style="clear:both;"></div>
    </div>
<script>
    layui.use(['carousel','element'], function () {
        var carousel = layui.carousel;
        var element = layui.element;
        //图片轮播
        carousel.render({
            elem: '#test'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            , height: '250px'
            , autoplay:true
            , full:false
            , interval: 3000
        });

    });
</script>
</body>
</html>